<!DOCTYPE html>
<html class="no-js" lang="fr">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>详情页</title>
    <meta name="description" content="Xolio - Creative Agency Template" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Place favicon.ico in the root directory -->

    <!-- CSS here -->
    <link rel="stylesheet" href="__TMPL__/public/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/animate.min.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/magnific-popup.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/fontawesome-all.min.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/odometer.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/slick.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/default.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/style.css" />
    <link rel="stylesheet" href="__TMPL__/public/static/css/responsive.css" />

    <style>
        .login_bg {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        .login_left {
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 40%;
            background-image: url(__TMPL__/public/static/image/login_bj.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .login_left img {
            width: 60px;
            position: absolute;
            top: 15px;
            left: 20px;
        }
        .login_left .slogin {
            position: absolute;
            top: 32%;
            left: 20px;
        }
        .login_left .slogin h2 {
            font-size: 20px;
            font-weight: 600;
            padding: 0;
            color: #191a39;
            margin-bottom: 30rpx;
        }
        .login_left .slogin p {
            font-size: 14px;
            font-weight: 500;
            margin: 0;
            color: #191a39;
            line-height: 30px;
        }
        .login_right {
            width: 100%;
            height: 60%;
            background-color: #fff;
            position: absolute;
            top: 40%;
            left:0;
            overflow: hidden;
            margin-top: -10px;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }
        .right_box {
            position: absolute;
            top: 20px;
            right: 50px;
        }
        .login_right .form_box {
            width: 90%;
            margin: 0 5%;
            padding:10px 20px;
            position: absolute;
            border-radius: 10px;
        }

        .login_right .form-grp {
            position: relative;
            margin-top: 24px;
        }
        .login_right .form-grp .label_box{
            display: flex;
            justify-content: flex-start;
            color:#333333 ;
            align-items: center;
        }
        .login_right .form-grp .label_box img{
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }
        .login_right .form-grp input {
            width: 100%;
            border:none;
            border-bottom: 1px solid #e3e3e3;
            backdrop-filter: blur(21px);
            background: transparent;
            letter-spacing: 0.0833333px;
            color: #AAAAAA;
            font-size: 16px;
            padding: 10px 30px 10px 0px;
            height: 40px;
            display: block;
        }
        .login_right .trip_box{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin:15px 0;
        }
        .login_right .trip_box .radio{
            display: flex;
            align-items: center;
        }
        .login_right .trip_box input{
            width: 16px;
            height: 16px;
            border:1px solid #D9D9D9;
            border-radius: 4px;
            margin-right: 5px;
        }
        .login_right .trip_box label{
            color: #AAAAAA;
            font-size: 14px;
        }

        .login_right .trip_box a{
            color: #2B5B99;
            font-size: 14px;
        }


        .login_right .btn_box{
            width: 100%;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .login_right .btn_box a{
            color: #00989B;
            font-size: 14px;
            width: 100%;
            display: block;
            margin-top: 6px;
            text-align: center;
        }
        .login_right .btn_box .zhuce{
            color: #777777;
            font-size: 14px;
            width: 100%;
            display: block;
            margin-top: 40px;
            text-align: center;
        }
        .login_right .btn_box .zhuce span{
            color: #00989B;
        }
        .login_right .btn_box .btn{
            width: 100%;
            height: 50px;
            line-height: 50px;
            color: #16D0C0;
            font-size: 16px;
            border:1px solid #16D0C0;
            background-color: #fff;
            line-height: 50px;
            text-align: center;
            border-radius: 25px;
            padding:0;
        }
        .login_right .btn_box .btn2{
            color: #000000;
            border:none;
            background: linear-gradient(to right,#FDFE94, #0ACEC3 );
        }

        .login_right .captcha img {
            width: 140px;
            margin-bottom: 40px;
            margin-left: calc(0px);
            height: 40px;
        }
    </style>
</head>
<body>
<!--loading-->
<div id="preloader">
    <div id="loader" class="loader">
        <div class="loader-container">
            <div class="loader-icon">
                <img src="__TMPL__/public/static/picture/preloader.png" alt="Preloader" />
            </div>
        </div>
    </div>
</div>
<!--loading -->

<!-- 鼠标特效 -->
<div class="mouseCursor cursor-outer"></div>
<div class="mouseCursor cursor-inner"><span>Drag</span></div>
<!-- 鼠标特效 -->

<div class="login_bg">
    <div class="login_left">
        <img src="__TMPL__/public/static/picture/preloader.png" alt="Preloader" />
        <div class="slogin">
            <h2>我们的愿景</h2>
            <p>致力于外汇返佣第一品牌</p>
            <p>九鼎返佣网，您外汇交易的贴身管家</p>
        </div>
    </div>
    <div class="login_right">
        <div class="form_box">
            <!-- <img src="__TMPL__/public/static/picture/preloader.png" /> -->
            <form class="js-ajax-form" action="{:url('user/Register/doRegister')}" method="post">
                <div class="form-grp">
                    <label class="label_box"><img src="__TMPL__/public/static/image/login_icon1.png" alt="Preloader" />{:lang('username')}</label>
                    <input  id="input_username" name="username"  placeholder="{:lang('mobile/email/username')}" />
                </div>
                <div class="form-grp">
                    <label class="label_box"><img src="__TMPL__/public/static/image/login_icon2.png" alt="Preloader" />{:lang('PASSWORD')}</label>
                    <input type="password" id="input_password" name="password" placeholder="{:lang('PASSWORD')}" />
                </div>

                <div class="form-grp">
                    <label class="label_box"><img src="__TMPL__/public/static/image/login_icon2.png" alt="Preloader" />{:lang('password again')}</label>
                    <input type="password" id="input_password2" name="password2" placeholder="{:lang('Enter your password again')}" />
                </div>

                <div class="form-grp captcha">
                    <div style="position: relative;">
                        <input type="text" name="captcha" placeholder="{:lang('code')}" class="form-control captcha" style="width: 170px;float: left;margin-right: 30px">
                        <captcha height="38" width="160" font-size="20"/>
                    </div>
                </div>


                <div class="btn_box">
                    <button type="submit" class="btn btn2">{:lang('now login')}<span></span></button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- JS here -->
<script src="__TMPL__/public/static/js/jquery-3.6.0.min.js"></script>
<script src="__TMPL__/public/static/js/bootstrap.min.js"></script>
<script src="__TMPL__/public/static/js/isotope.pkgd.min.js"></script>
<script src="__TMPL__/public/static/js/imagesloaded.pkgd.min.js"></script>
<script src="__TMPL__/public/static/js/jquery.magnific-popup.min.js"></script>
<script src="__TMPL__/public/static/js/jquery.odometer.min.js"></script>
<script src="__TMPL__/public/static/js/swiper-bundle.min.js"></script>
<script src="__TMPL__/public/static/js/jquery.appear.js"></script>
<script src="__TMPL__/public/static/js/slick.min.js"></script>
<script src="__TMPL__/public/static/js/ajax-form.js"></script>
<script src="__TMPL__/public/static/js/parallax.min.js"></script>
<script src="__TMPL__/public/static/js/jquery.parallaxScroll.min.js"></script>
<script src="__TMPL__/public/static/js/tween-max.js"></script>
<script src="__TMPL__/public/static/js/wow.min.js"></script>
<script src="__TMPL__/public/static/js/main.js"></script>
</body>
</html>
